<template>
    <div class="login-bg">
        <div class="login-card">
            <div class="login-title">
                <!-- 如有logo可替换src路径 -->
                <!-- <img src="/logo.png" alt="logo" class="logo" /> -->
                <h2>{{ title }}</h2>
            </div>
            <el-form :model="form" :rules="rules" ref="formRef" class="login-form">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="用户名" size="large" :prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="密码" size="large"
                        :prefix-icon="Lock" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="large" style="width: 100%" @click="onSubmit"
                        :loading="loading">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { login } from '../api/auth'

const title = (import.meta as any).env?.VITE_APP_TITLE || '后台管理系统'
const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)
const form = ref({
    username: '',
    password: ''
})
const rules = ref<FormRules>({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const onSubmit = () => {
    formRef.value?.validate(async (valid) => {
        if (!valid) return
        loading.value = true
        try {
            const res = await login(form.value)
            if (res.token) {
                if (res.role !== 'admin') {
                    ElMessage.error('无权限访问后台系统')
                    localStorage.removeItem('token')
                    localStorage.removeItem('role')
                    return
                }
                localStorage.setItem('token', res.token)
                localStorage.setItem('role', res.role)
                ElMessage.success('登录成功')
                router.push('/')
            } else {
                ElMessage.error(res.msg || '登录失败')
            }
        } catch (err: any) {
            ElMessage.error(err?.response?.data?.msg || '登录失败')
        } finally {
            loading.value = false
        }
    })
}
</script>

<style scoped>
.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 48px 36px 36px 36px;
    min-width: 350px;
    max-width: 90vw;
}

.login-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

.logo {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
}

.login-form {
    width: 100%;
}
</style>
